<template>
  <div class="height100P flex justify-end margin-top-xl wrapper">
    <div class="flex-twice left">

<!--      支付宝付款相关-->
      <div>
        <div class="text-center">
          <div><span class="sys-span">扫一扫付款（元）</span></div>
          <div><span class="price-span">6999元</span></div>
        </div>
        <div class="syis-area">
          <img src="../../assets/imgs/zfb-ewm.png" class="zfb-ewm">
          <div class="flex justify-center">
            <div><img src="../../assets/imgs/saoyisao.png" class="saoyisao"></div>
            <div class="margin-left-10">
              <span class="dis-block fontWeight">打开手机支付宝</span>
              <span class="dis-block fontWeight margin-top-5">扫一扫继续付款</span>
            </div>
          </div>
        </div>
<!--        <div class="margin-top-xl">-->
<!--          <span class="zfbzf-but">支付宝支付</span>-->
<!--        </div>-->
        <div class="margin-top-xl flex justify-center">
          <span class="fhsj-but" @click="$router.back()">返回商家</span>
        </div>
      </div>

<!--      支付成功相关-->
      <div class="success" v-if="false">
        <div class="title">
          <span>支付成功</span>
        </div>
        <div class="order-content">
          <div><span class="fwmc-span">服务名称：分离小三</span></div>
          <div class="margin-tb-10"><span class="fwmc-span">订单编号：0000000001</span></div>
          <div class="margin-bottom-5"><span class="fwmc-span">服务内容包含：</span></div>
          <div class="detail">自选导师1对1服务<br /> 600分钟语音1对1挽回服务时间<br />
            APP内500条文字信息收发回合<br />
            4次紧急干预（导师直接联系对方）<br /> 服务有效期：60天
          </div>
        </div>
        <div class="foot-tip">
          <span>请保持电话通畅，您的客服导师将尽快联系您！</span>
        </div>
      </div>

      <!--      支付失败相关-->
      <div class="error" v-if="false">
        <div class="text-center">
          <img src="../../assets/imgs/error.png" class="error_img">
          <div class="margin-top-lg">
            <span>支付失败，请</span>
            <span style="color: #4EBBFF">重新支付</span>
          </div>
        </div>

        <div class="margin-top-xl flex justify-sb">
          <span class="fhsj-but">重新支付</span>
          <span class="fhsj-but" @click="$router.replace('fwgm')">返回服务选择</span>
        </div>
      </div>

    </div>
    <div class="flex-sub flex align-end justify-center">
      <div class="weixin-wrap">
        <img src="../../assets/imgs/erweima.png" class="ver-middle">
        <img src="../../assets/imgs/qq.png" class="ver-middle">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ZfbFk",
};
</script>

<style scoped lang="scss">


  .wrapper{
    margin: 80px 0 120px 0;
  }

  .success{
    .title{
      text-align: center;
      font-size: 24px;
      color: #FFFFFF;
      width: 416px;
      height: 80px;
      line-height: 80px;
      background: #9C5DFB;
      border-radius: 6px 6px 0 0;
    }

    .foot-tip{
      text-align: center;
      font-size: 16px;
      color: #FFFFFF;
      width: 416px;
      height: 60px;
      line-height: 60px;
      background: #9C5DFB;
      border-radius: 0 0 6px 6px;
    }

    .order-content{
      border: #9C5DFB 1px solid;
      padding: 40px 20px;

      .fwmc-span{
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 25px
      }

      .detail{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  .error{
    width: 416px;
    margin: 150px 0;

    .error_img{
      width: 110px;
      height: 110px;
    }
  }

  .fhsj-but{
    display: block;
    text-align: center;
    width: 148px;
    height: 45px;
    line-height: 45px;
    background: #9C5DFB;
    box-shadow: 0 2px 6px 0 #F3F3F3;
    border-radius: 6px;
    color: #FFFFFF;
    cursor: pointer;

    &:hover{
      opacity: 0.8;
    }
  }

  .zfbzf-but{
    display: block;
    text-align: center;
    width: 348px;
    height: 45px;
    line-height: 45px;
    background: #02A9F1;
    box-shadow: 0 2px 6px 0 #F3F3F3;
    border-radius: 6px;
    color: #FFFFFF;
  }

  .left{
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .syis-area{
      box-sizing: border-box;
      width: 348px;
      border-radius: 6px;
      padding: 20px 30px;
      border: 1px solid #979797;
      margin-top: 30px;

      .zfb-ewm{
        width: 288px;
      }

      .saoyisao{
        width: 45px;
      }
    }

  }

  .sys-span{
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .price-span{
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FF6060;
  }

  .weixin-wrap{

    img:nth-child(1){
      width: 130px;
    }

    img:nth-child(2){
      width: 60px;
    }
  }

</style>
